<template>
  <div style="padding: 20px 20%;background-color: #F8F8F8FF;min-height: 100vh">
    <el-card v-for="item in helpList" :key="item.id" style="margin: 20px 0">
      <div style="display: flex;gap: 10px">
        <div style="width: 70px;height: 50px;text-align: center">
          <image-preview :src="item.avatar" :width="50" :height="50" style="border-radius: 50%"/>
        </div>
        <div style="height: 280px;flex: 1;display: flex;flex-direction: column;justify-content: space-between">
          <div style="font: bolder 20px normal">{{ item.title }}</div>
          <div style="display: flex;gap: 10px;align-items: center;font: lighter 14px normal;color: #888888FF">
            <div>{{ item.nickName }}</div>
            <div>{{ item.time }}</div>
          </div>
          <image-preview :src="item.img" :width="200" :height="140"/>
          <div>{{ item.content }}</div>
          <div>
            <el-button type="primary" size="mini" @click="item.show=!item.show">
              <span v-if="!item.show">展开评论</span>
              <span v-else>折叠评论</span>
            </el-button>
          </div>
        </div>
      </div>
      <div style="margin:10px 80px" v-if="item.show">
        <Comment :fid="item.id" module="help"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import {listHelp} from "@/api/project/help";
import Comment from "@/views/project/comment/Comment.vue";

export default {
  name: "help",
  components: {Comment},
  created() {
    listHelp(this.queryParams).then(res => this.helpList = res.rows)
  },
  data() {
    return {
      helpList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  }
}
</script>
<style scoped lang="scss">

</style>
